<template>
  <div>
    <el-page-header @back="goBack" content="详情页面">
</el-page-header>
  <div id="myChart" :style="{ width: '1000px', height: '600px' }"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      grades:this.$route.params.grades,
      testNames:this.$route.params.testNames,
      subject:this.$route.params.subject,
      options1:[],
      options2:[],
      value:"",
    };
  },
  
  methods: {
    goBack() {
      this.$router.push({ 
        path: "/teacher/tea_data_analysis/xxx"
      });
      },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: this.subject+"平均成绩" },
        xAxis: {
          type: "category",
          data: this.options1,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.options2,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
    },
    selectdata1() {
      console.log(this.grades);
      axios
        .get("http://localhost:8080/selectStuData2", {
          params: {
            
            grades: this.grades,
            testNames: this.testNames,
            subject: this.subject,
          },
        })
        .then((resp) => {
          //console.log(resp.data.gradeclass);
          var tmp1 = eval(resp.data.classlist);
          this.options1 = tmp1;
          var tmp2 = eval(resp.data.pscore);
          this.options2 = tmp2;
          
          this.drawLine();
        });
    },
  },

  created() {
    this.selectdata1();
    
  },
  mounted() {
    this.drawLine();
    
  },
};
</script>


<style scoped></style>